<template>
    <div id="goodList" class="goodList">
        <ul>
            <!-- 遍历 -->
            <li v-for="(item,index) in list" :key="item.id">
                
                <!-- 图片和信息 -->
                <div class="pic-info">
                    <!-- 图片 -->
                    <router-link :to="{ path: '/product', query: {productID:item.id} }">
                        <div class="pic">
                            <img :src="item.img" alt />
                        </div>
                    </router-link>
                    <!-- 信息 -->
                    <div class="info"> 
                        <!-- 标题 -->
                        <div class="title">
                            {{ item.title }}
                        </div>
                        <!-- 副标题 -->
                        <div class="suc-title">
                            {{ item.sku_name }}
                        </div>
                        <!-- 发布时间 -->
                        <div class="time">
                            {{ item.time }}
                        </div>
                        <!-- 价格 & 操作 -->
                        <div class="pri-act">
                            <!-- 价格 -->
                            <div class="pic">
                                <span>{{item.selling_price}}元</span>
                                <span
                                    v-show="item.price != item.selling_price"
                                    class="del"
                                >{{item.price}}元</span>
                            </div>
                            <!-- 操作 -->
                            <div class="act">
                                <el-button type="warning" plain>编辑</el-button>
                                <el-button type="danger" plain>下架</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <el-divider class="divider" v-if="index != list.length-1"></el-divider>
            </li>
        </ul>
    </div>
</template>
<script>
export default{
    name: "GoodList",
    props: ["list", "status", "isDelete"],
    data(){
        return{

        }
    },
    created:{

    },
    methods:{
        
    }
}
</script>
<style scoped>
.divider{
    margin: 10px 0;
}
ul li{
    list-style-type: none;
}
.pic-info{
    display: flex;
    justify-content: left;
    align-items: center;
}
.pic-info .pic {
    display: inline;
}
.pic-info .pic img{
    width: 100px;
    height: 100px;
    background: url(../../assets/img/placeholder.png) no-repeat 50%;
    margin: 0 auto;
}
.pic-info .info{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.pic-info .info div{
    display: inline;
}
.pic-info .info .title{
    font-size: 18px;
    font-weight: 500;
}
.pic-info .info .suc-title{
    color: #9c9797;
    font-size: 14px;
    font-weight: 300;
}
.pic-info .info .time{
    color: #555555;
    font-size: 14px;
    font-weight: 300;
}
.pic-info .info .pri-act{
    display: flex;
    justify-content: space-between;
}
.pic-info .info .pri-act .pic{
    color: #ff6700;
}
.pic-info .info .pri-act .del{
    margin-left: 0.5em;
    color: #b0b0b0;
    text-decoration: line-through;
}


</style>